<template>
  <el-alert
    style="padding: 3px 5px"
    :title="content"
    type="warning"
    :closable="false"
  />
  <div class="mx-1 my-2 flex justify-between">
    <el-input
      v-model="params.fb_name"
      class="ec2-search"
      placeholder="用户名称"
      :prefix-icon="Search"
    />
    <el-button link size="small" @click="handleFilter(scope.$index, scope.row)"
      >筛选</el-button
    >
  </div>
  <el-space :size="10" class="mx-15 mb-1">
    <el-button type="primary" size="small" plain round>设置分组</el-button>
    <el-button type="primary" size="small" plain round>关联用户</el-button>
    <el-button type="primary" size="small" plain round>下载</el-button>
  </el-space>
  <div class="mob-list">
    <el-backtop :right="20" target=".mob-list" :bottom="60" />
    <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="disabled">
      <div
        class="mob-list-item text-content-color font"
        v-for="(item, index) in tableData"
      >
        <div class="flex align-center mb-1">
          <el-checkbox v-model="item.checked" />
          <el-avatar
            class="ml-1"
            shape="square"
            :size="60"
            fit="fill"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          />
          <div class="flex-1 ml-15">
            <div class="flex justify-between">
              <span class="font-mder text-main-color">梁有才</span>
              <span>私信用户</span>
            </div>
            <div class="mt">239843209348029384</div>
          </div>
        </div>
        <div class="flex justify-between border-bottom py-15">
          <span>电商消费(总额/次数)</span>
          <span>0.00/1</span>
        </div>
        <div class="flex justify-between border-bottom py-15">
          <span>电商消费(总额/次数)</span>
          <span>0.00/1</span>
        </div>
        <div class="flex justify-between border-bottom py-15">
          <span>电商消费(总额/次数)</span>
          <span>0.00/1</span>
        </div>
        <div class="flex justify-between py-15">
          <span>电商消费(总额/次数)</span>
          <span>0.00/1</span>
        </div>
        <div wrap class="flex justify-end my-1">
          <el-button size="small" plain round @click="openUsersGroup"
            >设置分组</el-button
          >
          <el-button size="small" plain round>关联用户</el-button>
          <el-button size="small" plain round>客户资料</el-button>
        </div>
      </div>
      <div class="text-tips-color font-sm text-center" v-if="loading">Loading...</div>
      <div class="text-tips-color font-sm text-center" v-if="noMore">No more</div>
    </div>
  </div>

  <set-group
    ref="groupRef"
    :row="currRow"
    :type="groupType"
    :euids="currEuids"
    :muti="groupMuti"
  ></set-group>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive,computed } from "vue";
import { Search, User, ArrowDown } from "@element-plus/icons-vue";
import { $userlist, $usertype, $updateUserGroup, $unbindUser } from "@api/user";
import { $getGroup } from "@api/common";
import router from "@/router/";
const groupMuti = ref(false);
const groupType = ref("");
const groupRef = ref();
let currEuids = ref([]);
let currRow = ref(null);
let params = ref({
  fb_name: "",
  msg_user_id: "",
  e_consume_num: "",
  e_consume_price: "",
  user_type_id: "",
  group_id: null,
  group_name: "",
  current_page: 1,
  page_size: 10,
});
const loading = ref(false);
const noMore = ref(false);
const disabled = ref(true);
const filter = ref({
  group: [],
  usertype: [],
});
const content = ref("");
const total = ref(0);
const tableData = ref([]);
onMounted(() => {
  getFilter();
});
const getFilter = async () => {
  const group_res = await $getGroup();
  const usertype_res = await $usertype();
  filter.value.group = group_res.data.list;
  filter.value.usertype = usertype_res.data.list;
  //初始化默认值
  params.value.user_type_id = usertype_res.data.list[0].id;
  getData();
};
const getData = async () => {
 
  let res = await $userlist(params.value);
  loading.value=false;
  if (res.code == 0) {
    res.data.table.forEach((ele) => {
      Reflect.set(ele, "checked", false);
      disabled.value=false;
    });
    tableData.value= [...tableData.value, ...res.data.table];
    //tableData.value  =  tableData.value.concat(res.data.table;
    total.value = res.data.total;
    content.value = `总私讯用户数：${res.data.sum_private}，总活动用户数：${res.data.sum_activity} ，(统计时间：${res.data.sum_time})`;
  }
};
const loadMore = () => {
console.log('a')
  let loadedNums = params.value.current_page * params.value.page_size;
  if (loadedNums >= total.value) {
    noMore.value=true;
    disabled.value=true;
    return false;
  }
   noMore.value=false;
   loading.value=true;
  params.value.current_page++;
  getData();
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
  console.log(`current page: ${val}`);
};
const handleSelectionChange = (val) => {
  currEuids.value = [];
  if (val.length !== 0) {
    val.forEach((ele) => {
      currEuids.value.push(ele.euid);
    });
  }
};
const search = () => {
  console.log(params.value);
  getData();
};

const openGroup = (index, row) => {
  groupMuti.value = true;
  groupType.value = "user";
  currRow.value = row;
  currEuids.value = [];
  groupRef.value.changeShow();
};
const openUsersGroup = () => {
  console.log(currEuids.value);
  if (currEuids.value.length == 0) {
    ElMessage({
      message: "请选择用户",
      type: "warning",
    });
    return false;
  }
  groupMuti.value = false;
  groupType.value = "users";
  currRow.value = {};
  groupRef.value.changeShow();
};

const handleInfo = (index, row) => {
  console.log(row);
  router.push({
    path: "/user/info",
    query: {
      id: row.euid,
    },
  });
};
const quitGroup = (index, row) => {
  ElMessageBox.confirm("确定要解除用户绑定吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
    draggable: true,
  }).then(() => {
    quitUserGroup(row);
  });
};
const unbind = (index, row) => {
  ElMessageBox.confirm("确定要解除用户绑定吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
    draggable: true,
  }).then(() => {
    unbindUserGroup(row);
  });
};
const unbindUserGroup = async (row) => {
  let res = await $unbindUser({ euid: row.euid });
  if (res.code == 0) {
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    getData();
  } else {
    ElMessage.error(res.msg);
  }
};
const quitUserGroup = async (row) => {
  let res = await $updateUserGroup({ euid: row.euid });
  if (res.code == 0) {
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    getData();
  } else {
    ElMessage.error(res.msg);
  }
};
const refreshPage = () => {
  //location.reload();
  const currentRoute = router.currentRoute.value;
  console.log(currentRoute);
  router.replace(currentRoute);
  //router.replace({name: '404'});
};
</script>
<style>
.ec2-search {
  margin-right: 5px;
  .el-input__wrapper {
    border-radius: 30px;
  }
}
.ec2-btncon {
  .el-button {
    margin-bottom: 2px;
    justify-content: flex-start;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
<style lang="scss" scoped>
.mob-list {
  height: 500px;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  .mob-list-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
  }
  .desc-item {
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
  }
}
.consume {
  padding-left: 2px;
  color: var(--el-color-primary);
}
.ec2-btncon {
  display: flex;
  flex-direction: column;
}
</style>
